<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地 -->
    <script src="../js/jquery-1.10.1.min.js"></script>
    <!-- <script src="../js/jquery-3.6.0.min.js"></script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list .newLi {
            border-color: red;
        }

        .list .active {
            background-color: #6ff;
        }


        /* div[class]{} */
        /* div[class='wrap'] */
        /* div[class][title] {} */

        /* div:not([class]) {
            width: 100px;
        } */
    </style>

</head>

<body>
    <!-- <input hidden type="text"> -->
    <div class="wrap">
        <h3 id="tips">新增</h3>
        <div class="list">
            <li class="first" title="hei">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </div>
    </div>

</body>
<script>

    // jquery中如何新增元素
    // 1.  原生转jquery对象
    // 2.  接收一个html结构作为参数  => 对应结构的jquery对象
    // 2.1  除了接收html结构 还可以 额外接收一个对象 作为参数(新增元素的修饰)
    // $("<li>", {
    //     style: "line-height:50px;width:200px;height:50px",
    //     title: "哈哈",
    //     asd: "asd",
    //     class: "haha",
    //     html: "这是新增的li",
    //     click(e) {
    //         alert($(this).index())
    //     }
    // })

    // 将子元素 放到父元素的最后面
    // $(parent).append(DOM|jquery对象)  向匹配的元素(父元素)中  追加 另一个元素(新的|页面中已存在的)  
    // $(DOM|jquery对象).appendTo(selector)    将匹配的元素(新的|页面中已存在的)  追加到  另一个元素(父元素)

    // 将子元素 放到父元素的最前面
    // $(parent).prepend(DOM|jquery对象)  向匹配的元素(父元素)中  预追加 另一个元素(新的|页面中已存在的) 
    // $(DOM|jquery对象).prependTo(selector)    将匹配的元素(新的|页面中已存在的)  预追加到  另一个元素(父元素)

    /* $("#tips").click(function () {
        // var li = document.createElement("li");
        // li.className = "haha";
        // li.innerHTML = "这是新增的li";
        // $(".list").append(li);

        var li = document.createElement("li");
        var $li = $(li).addClass("haha").html("这是新增的li");
        console.log($li);
        $(".list").append($li);
    }) */

    // $("#tips").click(function () {
    //     // var li = document.createElement("li");
    //     // li.className = "haha";
    //     // li.innerHTML = "这是新增的li";
    //     // $(li).appendTo(".list");

    //     var li = document.createElement("li");
    //     $(li).addClass("haha").html("这是新增的li").appendTo(".list");
    // })

    // $("#tips").click(function () {

    //     var li = document.createElement("li");
    //     $(li).addClass("haha").html("这是新增的li").prependTo(".list");
    // })


    // --------------------------------------------------------------------
    $("#tips").click(function () {
        // 2.  接收一个html结构作为参数  => 对应结构的jquery对象
        // $("<li class='haha'>我是新增的li</li>").appendTo(".list");
        // $("<li class='haha'>我是新增的li</li>").prependTo(".list");
        // $("<li></li>")   => $("<li />")  =>  $("<li>") 

        // $("<li>").addClass("haha").html("这是新增的li").prependTo(".list");


        // $("<li>").width(200).height(50).css({
        //     lineHeight: "50px",
        // }).addClass("haha").html("这是新增的li").click(function () {
        //     alert($(this).index())
        // }).prependTo(".list");

        $("<li>", {
            style: "line-height:50px;width:200px;height:50px",
            title: "哈哈",
            asd: "asd",
            class: "haha",
            html: "这是新增的li",
            click(e) {
                alert($(this).index());
            },
        }).prependTo(".list");
    })


</script>


</html>